<template>
  <div class="admin_box">
    <h1>管理员列表</h1>

    <!-- 新增管理员 -->
    <el-button type="info" class="addAdmin_btn" @click="addAdminVisible = true">新增管理员</el-button>

    <!-- 新增管理员弹框 -->
    <el-dialog v-model="addAdminVisible" title="新增管理员">
      <el-form :model="addAdminData">
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="addAdminData.account" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input autocomplete="off" type="password" v-model="addAdminData.password" />
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="addAdminData.name" />
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="addAdminData.tel" />
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-select placeholder="请选择角色" style="width: 100%;" v-model="addAdminData.role">
            <el-option label="超级管理员" value="super" />
            <el-option label="普通管理员" value="admin" />
            <el-option label="普通员工" value="emp" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addAdminVisible = false" type="info" plain>取消</el-button>
          <el-button type="info" @click="addAdminFn">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 搜索管理员 -->
    <el-form :inline="true" :model="searchData" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input placeholder="请输入姓名" v-model="searchData.name" clearable />
      </el-form-item>
      <el-form-item label="电话">
        <el-input placeholder="请输入电话" v-model="searchData.tel" clearable />
      </el-form-item>
      <el-form-item label="角色" :label-width="formLabelWidth">
          <el-select placeholder="请选择角色" style="width: 100%;" v-model="searchData.role">
            <el-option label="超级管理员" value="super" />
            <el-option label="普通管理员" value="admin" />
            <el-option label="普通员工" value="emp" />
          </el-select>
        </el-form-item>
      <el-form-item>
        <el-button type="info" @click="searchFn">搜索</el-button>
      </el-form-item>
    </el-form>

    <!-- 管理员列表 -->
    <el-table :data="adminData" style="width: 100%" fit>
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column prop="id" label="id" />
      <el-table-column prop="account" label="账号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="role" label="角色" />
      <el-table-column prop="tel" label="电话" />
      <el-table-column prop="isdel" label="账号是否作废" />
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button type="info" plain @click="editAdmin(scope)">编辑</el-button>
          <el-button type="danger" plain @click="delAdminFn(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑管理员弹框 -->
    <el-dialog v-model="editAdminVisible" title="编辑管理员">
      <el-form :model="editAdminData">
        <el-form-item label="id" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="editAdminData.id" />
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="editAdminData.name" />
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="editAdminData.tel" />
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-select placeholder="请选择角色" style="width: 100%;" v-model="editAdminData.role">
            <el-option label="超级管理员" value="super" />
            <el-option label="普通管理员" value="admin" />
            <el-option label="普通员工" value="emp" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editAdminVisible = false" type="info" plain>取消</el-button>
          <el-button type="info" @click="editAdminFn">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 分页 -->
    <div class="paging">
      <el-pagination v-model:current-page="paging.currentPage" :page-size="10" :pager-count="11"
        layout="prev, pager, next" :total="count" @current-change="changeCurrent" />
    </div>

  </div>
</template>

<script setup lang="ts">
import { getAdminListAPI, addAdminAPI, updateAdminAPI, delAdminAPI } from "@/api/admin"
import { ref, reactive } from 'vue'
import type { IadminData, IadminList } from "@/untils/type"
import { ElMessage } from 'element-plus'

const formLabelWidth = '60px'
let addAdminVisible = ref<boolean>(false);
let editAdminVisible = ref<boolean>(false);
let adminData: Array<IadminData> = reactive<Array<IadminData>>([]);
let count = ref<number>(0);
let paging = reactive({
  currentPage: 1,
  pageSize: 10
})
let addAdminData = reactive({
  id: '',
  account: '',
  password: '',
  name: '',
  role: '',
  tel: ''
})
let editAdminData = reactive({
  id: '',
  name: '',
  role: '',
  tel: ''
})
let delAdminData = reactive({
  id: ''
})
let searchData=reactive({
  name:'',
  tel:'',
  role:''
})

// 管理员数据获取
function getAdminList(data?: IadminList) {
  getAdminListAPI({ ...data }).then(((res: any) => {
    // console.log(res);
    if (res.code == 2000) {
      // adminData.push(...res.data);
      count.value = res.total; //数据总数量   
      adminData.splice(0, adminData.length, ...res.data)
    }
  }))
}
getAdminList();

// 分页
function changeCurrent() {
  // console.log("currentPage", paging.currentPage);
  getAdminList(paging);
}

// 新增管理员
function addAdminFn() {
  addAdminVisible.value = false;
  addAdminAPI({
    ...addAdminData
  }).then((res: any) => {
    // console.log(res);
    if (res.code == 2015) {
      ElMessage({
        message: res.msg,
        type: 'warning',
      })
    }
    if (res.code == 2000) {
      ElMessage({
        showClose: true,
        message: res.msg,
      })
    }
  })
  getAdminList();
  addAdminData.account = ''
  addAdminData.password = ''
  addAdminData.name = ''
  addAdminData.role = ''
  addAdminData.tel = ''
}

// 编辑管理员
function editAdmin(scope: any) {
  editAdminVisible.value = true;
  // console.log(scope.row);
  editAdminData.id = scope.row.id
  editAdminData.name = scope.row.name
  editAdminData.role = scope.row.role
  editAdminData.tel = scope.row.tel

}

// 修改管理员数据
function editAdminFn() {
  updateAdminAPI({
    ...editAdminData
  }).then((res: any) => {
    console.log(res);
    if (res.code == 2000) {
      ElMessage({
        showClose: true,
        message: res.msg,
      })
    }
  })
  editAdminVisible.value = false;
}

//删除管理员数据
function delAdminFn(scope: any) {

  delAdminData.id = scope.row.id + '';
  delAdminAPI({
    ...delAdminData
  }).then((res: any) => {
    // console.log(res);
    if (res.code == 2000) {
      ElMessage({
        showClose: true,
        message: res.msg,
      })
    }
  })

}

// 搜索
function searchFn() {
  getAdminList(searchData);
}
</script>

<style lang="less" scoped>
.admin_box {
  width: 100%;
  height: 100%;

  .addAdmin_btn {
    margin: 20px 0;
  }

  .paging {
    width: 100%;
    height: 70px;
    display: flex;

    .el-pagination {
      margin: 5px auto;
    }
  }

}
</style>